<template>
  <div>
    <div :id="mapId" style="height: 400px; width: 100%;  overflow: hidden;">
    </div>
  </div>
</template>
<script>
  import * as HMAP from './hmap.manage.js'
  export default {
    props: {
      type: String
    },
    data () {
      return {
        mapId: 'selectPoint_' + Math.random().toString(36).substr(2),
        mapManager: null,
        floorId: '',
        angle: 0,
        meshType: '0'
      }
    },
    activated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(true)
      }
    },
    deactivated() {
      if (this.mapManager) {
        this.mapManager.setMapWork(false)
      }
    },
    beforeDestroy () {
      if (this.mapManager) {
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    mounted() {
      this.mapManager = new HMAP.Hmap(this.mapId, {
      	mapStorage: true, 						      // 使用地图缓存功能，加快加载速度
      	viewMode: HMAP.ViewMode.Mode_3D, 	// 初始二维还是三维状态,默认是3D状态
        maxDistance: 2000000,               // 摄像头最远距离
      });
      this.mapManager.on('onMapClick', (e) => {
        var name = "";
        var intersects = e.intersects || []
        for(var i=0; i<intersects.length; i++) {
          if(intersects[i].object.type == "Mesh" && intersects[i].object.objId != 'mark1') {
            if(intersects[i].object.name != '') {
              name = intersects[i].object.name;
            } else if(intersects[i].object.parent && intersects[i].object.parent.name != '') {
              name = intersects[i].object.parent.name;
            }
            break;
          }
        }

        if(e.position) {
          if(this.type === 'kiosk') {
            this.setDirMesh(this.floorId, e.position.x, e.position.y, e.position.z+2, this.angle);
          } else {
            this.setMarkPoint(this.floorId, e.position.x, e.position.y, e.position.z);
          }
          this.$emit('onMapClick', {name: name, x: this.toFixed(e.position.x), y: this.toFixed(e.position.y), z: this.toFixed(e.position.z+2)});
        }
      })
    },
    computed: {
      floorList: {
        get () {
          return this.$store.state.shopdata.floorList
        }
      }
    },
    methods: {
      resize() {
        this.$nextTick(() => {
          if (this.mapManager) {
            this.mapManager.resize()
          }
        })
      },
      _getMapFile(floorData) {
        if(!floorData) {
          return null;
        }
        if(this.type === 'ibeacon') {
          return floorData.ibeaconMap
        } else if(this.type === 'vr') {
          return floorData.vrMap
        }
        return floorData.mapFile
      },
      _getFloorData(floorId) {
        for(var i=0; i<this.floorList.length; i++) {
          if(this.floorList[i].id === floorId) {
            return this.floorList[i];
          }
        }
        return null;
      },
      showFloorAndMarkPoint(floorId, x, y, z) {
        this.showFloor(floorId);
        this.setMarkPoint(floorId, x, y, z, true);
      },
      showFloor(floorId) {
        if(!this.mapManager) {
          return;
        }
        if( !floorId || floorId === "" ) {
          this.mapManager.showFloors([]);
          return;
        }
        this.floorId = floorId;
        var floorData = this._getFloorData(floorId);
        this.mapManager.addFloor({
        	floorId: floorId,  				// 必须：楼层Id
        	floorName: floorData.name,					// 必须：楼层名称
        	floorHeight: floorData.height,						// 必须: 楼层展示的z坐标
        	floorMap: this._getMapFile(floorData),							// 必须: 地图文件
        	buildingName: floorData.buildingName,					// 必须: 所属楼宇
          longitude: floorData.longitude,
          latitude: floorData.latitude
        })
        this.mapManager.showFloors([floorId]);
        this.mapManager.spreadMap({
        	spreadRatio: 1, 									// 伸缩倍数
        	duration: 0.3,											// 动画秒数
        	rotateAngle: floorData.singleRotateAngle,	// 地图旋转角度
        	tiltAngle: 90,										// 地图到xy面的角度
        	distance: floorData.singleCameraDis,									// 摄像头距离中心点距离
        	targetX: floorData.centerX,									   		// 目标点X轴
        	targetY: floorData.centerY,									   		// 目标点Y轴
        	targetZ: 0,                                       // 目标点Z轴
        })
        this.mapManager.setMapWork(true);
      },
      setMarkPoint(floorId, x, y, z, spread) {
        if(x == null || y == null || x == '' || y == '') {
          return;
        }
        this.mapManager.addMesh({
          objId: 'mark1',												// 必须：这个模型对应的ID,唯一
          objType: 'mark',									// 选填：类型区分 默认mesh
          floorIds: [floorId],    									// 必须：隶属于哪些楼层，如果只有一个，直接添加到该楼层，无/多个添加到scene, 无则不受控制，多个时跟随楼层状态展示
          meshUrl: 'point',											// 必须：模型的url
          canSelect: false,									// 选填: 是否可以被选中
          x: x,															// 必须：坐标x
          y: y,															// 必须：坐标y
          z: z,												// 必须：坐标z (本楼层或场景中坐标z)
        })
        if(spread) {
          this.mapManager.spreadMap({
          	spreadRatio: 1, 									// 伸缩倍数
          	duration: 1,											// 动画秒数
          	rotateAngle: 0,	// 地图旋转角度
          	tiltAngle: 89,										// 地图到xy面的角度
          	distance: 3000,									// 摄像头距离中心点距离
          	targetX: x,									   		// 目标点X轴
          	targetY: y,									   		// 目标点Y轴
          	targetZ: z                                      // 目标点Z轴
          })
        }
      },
      removeMarkPoint() {
        this.mapManager.removeMeshById("mark1")
      },
      changeDir(angle) {
        this.mapManager.addMesh({
          objId: 'mark1',										// 必须：这个模型对应的ID,唯一
          objType: 'mark',									// 选填：类型区分 默认mesh
          angle: angle || 0                 //
        })
      },
      setDirMesh(floorId, x, y, z, angle) {
        this.angle = angle;
        var meshUrl = this.meshType === '0' ? 'static/map/heng.hmap': 'static/map/shu.hmap'
        this.mapManager.addMesh({
          objId: 'mark1',										// 必须：这个模型对应的ID,唯一
          objType: 'mark',									// 选填：类型区分 默认mesh
          floorIds: [floorId],    					// 必须：隶属于哪些楼层，如果只有一个，直接添加到该楼层，无/多个添加到scene, 无则不受控制，多个时跟随楼层状态展示
          meshUrl: meshUrl,									// 必须：模型的url
          canSelect: false,									// 选填: 是否可以被选中
          angle: angle || 0,                //
          x: x,															// 必须：坐标x
          y: y,															// 必须：坐标y
          z: z,													// 必须：坐标z (本楼层或场景中坐标z)
        })
        // setTimeout(()=>{
        //   this.mapManager.mapMoveTo({
        //     duration: 1.0,
        //     x: x,
        //     y: y,
        //     z: 0
        //   })
        // }, 500)
      },
      changeMeshType(type) {
        if(type !== this.meshType) {
          this.removeMarkPoint();
          this.meshType = type
        }
      }
    }
  }
</script>

<style>
</style>
